<template>
	<view>
		<view class="tui-form">
			<view class="tui-view-input">
				<tui-list-cell :hover="false" padding="0" :lineLeft="false" :arrow="true">
					<view class="tui-line-cell">
						<view class="tui-title">姓名</view>
						<input v-model="memberinfo.xingming" placeholder-class="tui-phcolor" class="tui-input" name="name"
							placeholder="请输入姓名" type="text" :disabled="isWaitAudit"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0" :lineLeft="false" :arrow="true">
					<view class="tui-line-cell">
						<view class="tui-title">手机号</view>
						<input v-model="memberinfo.telephone" placeholder-class="tui-phcolor" class="tui-input" name="name"
							placeholder="请输入手机号" type="text" :disabled="isWaitAudit"/>
					</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" padding="0" :lineLeft="false" :arrow="true">
					<view class="tui-line-cell">
						<view class="tui-title">身份证号</view>
						<input v-model="memberinfo.id_cart" placeholder-class="tui-phcolor" class="tui-input" name="name"
							placeholder="请输入手机号" type="text" :disabled="isWaitAudit"/>
					</view>
				</tui-list-cell>
			
				<tui-list-cell  padding="0" :lineLeft="false" :arrow="true">
					<view class="tui-list-cell">
						<view class="tui-title">身份证正面</view>
						<image v-if="memberinfo.id_cart_img_1" @tap="changeImg('id_cart_img_1')" :src="memberinfo.id_cart_img_1" class="tui-avatar"></image>
						<tui-icon v-else name="immore" @click="changeImg('id_cart_img_1')" class="tui-avatar" :size="52"></tui-icon>
					</view>
				</tui-list-cell>
				<tui-list-cell  padding="0" :lineLeft="false" :arrow="true">
					<view class="tui-list-cell">
						<view class="tui-title">身份证反面</view>
						<image v-if="memberinfo.id_cart_img_2" @tap="changeImg('id_cart_img_2')" :src="memberinfo.id_cart_img_2" class="tui-avatar"></image>
						<tui-icon v-else name="immore" @click="changeImg('id_cart_img_2')" class="tui-avatar" :size="52"></tui-icon>
					</view>
				</tui-list-cell>
				<tui-list-cell  padding="0" :lineLeft="false" :arrow="true" >
					<view class="tui-list-cell">
						<view class="tui-title">残疾证</view>
						<image v-if="memberinfo.disability_cert" @tap="changeImg('disability_cert')" :src="memberinfo.disability_cert" class="tui-avatar"></image>
						<tui-icon v-else name="immore" @click="changeImg('disability_cert')" class="tui-avatar" :size="52"></tui-icon>
					</view>
					
				</tui-list-cell>
				<tui-list-cell  padding="0" :lineLeft="false">
					<view class="tui-list-more-cell">
						<view class="tui-title">其它资料</view>
						<view class="tui-more-img">
							<image v-for="(item,index) in memberinfo.images" :src="item.img_url" class="tui-avatar"></image>
							<tui-icon name="immore" @click="changeImg('more')" class="tui-avatar" :size="52"></tui-icon>
						</view>
						
					</view>
				</tui-list-cell>
				<tui-list-cell padding="0">
					<view class="tui-list-submit-cell">
						<tui-button @click="submitVip" :disabled="isWaitAudit" type="danger" height="88rpx" shape="circle">{{submitButTxt}}</tui-button>
					</view>
				</tui-list-cell>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				memberinfo: {},
				isWaitAudit:false,
				submitButTxt:'提交',
				reason:''
			}
		},
		created() {
			let _this = this;
			_this.$request.get('member.auditdetail', {
				samkey: (new Date()).valueOf()
			}).then(res => {
				console.log(res)
				if (res.errno == 0) {
					if(res.data.is_vip_apply == 1) {
						_this.isWaitAudit = true
						_this.submitButTxt = '审核中...'
					}else if(res.data.vip_apply_status == 2){
						_this.reason = res.vip_apply_denial_reason
						uni.showModal({
							title:'提示',
							content:'审核未通过：'+res.vip_apply_denial_reason,
							showCancel:false
						})	
					}
					_this.memberinfo = res.data;
				}else{
					uni.showModal({
						title:'提示',
						content: '系统异常',
						showCancel: false
					})
				}
			})
		},
		methods: {
			submitVip(){
				this.$request.post('member.applyVip',this.memberinfo).then(res => {
					console.log(res)
					if (res.errno == 0) {
						uni.showModal({
							title:'提示',
							content: '已提交申请，等待审核通过',
							showCancel: false,
							success : function(){
								uni.navigateTo({
									url: '/pagesA/my/userInfo/index'
								});
							}
						})
					}else{
						uni.showModal({
							title:'提示',
							content: res.message,
							showCancel: false
						})
					}
				})
			},
			changeImg(name) {
				if(this.isWaitAudit){
					return
				}
				console.log(name)
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: res => {
						let tempFilePaths = res.tempFilePaths[0];
						
						this.$request.uploadFile(tempFilePaths).then(res => {
							console.log(res.url)
							
							if(name == 'more') {
								this.memberinfo.images.push({img_url:res.url})
							}else{
								this.memberinfo[name] = res.url
							}
						});
						
					}
				});
			}
		}
	}
</script>

<style>
	
	
	.tui-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
	}

	.tui-list-more-cell {
		width: 100%;
		color: $uni-text-color;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
		font-size: 30rpx;
	}
	
	.tui-more-img {
		width: 100%;
		padding: 24rpx;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	.tui-list-submit-cell{
		width: 100%;
		height: 100rpx;
		font-size: 30rpx;
		text-align: center;
		padding: 20rpx 20rpx;
	}
	
	.tui-list-cell {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 24rpx 60rpx 24rpx 30rpx;
		box-sizing: border-box;
	}
	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
	}
	.tui-title {
		width: 180rpx;
		font-size: 28rpx;
		flex-shrink: 0;
	}
	
	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}
	.tui-input {
		width: 500rpx;
		z-index:999;
	}

	.tui-view-input {
		width: 100%;
		box-sizing: border-box;
		padding: 0 0rpx;
	}
</style>